<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <link rel="stylesheet" href="CSS/public.css">
    <link rel="stylesheet" href="CSS/01 nav.css">
    <link rel="stylesheet" href="CSS/02 list.css">
    <link rel="stylesheet" href="font_s/iconfont.css">
    <link rel="stylesheet" href="CSS/03 fw.css">
    <link rel="stylesheet" href="CSS/04 flex1.css">
    <link rel="stylesheet" href="CSS/05 flex2.css">
    <link rel="stylesheet" href="CSS/pen.css">
    <link rel="stylesheet" href="CSS/service.css">
    <link rel="stylesheet" href="CSS/fixed.css">
    <link rel="stylesheet" href="CSS/06 list.css">
    <link rel="stylesheet" href="CSS/logo2.css">
    <link rel="stylesheet" href="CSS/07 flex4.css">
    <link rel="shortcut icon" href="ico/xiaomi.ico">

</head>

<body>
<!-- 小米顶部导航栏 -->
<div class="nav">
    <div class="nav_bx bx">
        <div class="nav_left">
            <ul>
                <li><a href="#">小米官网</a><span>|</span></li>
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li><a href="#">下载app</a><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
        </div>
        <div class="nav_right">
            <div class="nav_right_login">
                <ul>
                    <li><a href="#">登录</a><span>|</span></li>
                    <li><a href="#">注册</a><span>|</span></li>
                    <li><a href="#">消息通知</a></li>
                </ul>
            </div>
            <div class="nav_right_shop">
                <a href="#" class="iconfont icon-gouwuche"> 购物车</a>
                <div class="shopping"></div>
            </div>

        </div>

    </div>

</div>
     <!-- logo区域 -->
     <div class="logo">
        <div class="logo_bx">

            <div class="lg">
                <a href="#" class="logo_lg"></a>
            </div>

            <div class="logo_nav">
                <ul>
                    <li><a href="#">Xiaomi手机</a>
                        <!-- 菜单的下拉 -->
                        <div class="liList">
                            <div class="liList_bx">
                                <ul>
                                    <li>
                                        <div class="l">
                                            <a href="">
                                                <img src="imgs/010.webp" alt="">
                                                <h4>Xiaomi MIX Fold 3</h4>
                                                <p><span>8999</span>元<span>起</span></p>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="d">
                                        <div class="l">
                                            <a href="">
                                                <img src="imgs/020.webp" alt="">
                                                <h4>Xiaomi Civi </h4>
                                                <p><span>2499</span>元<span>起</span></p>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="d">
                                        <div class="l">
                                            <a href="">
                                                <img src="imgs/030.webp" alt="">
                                                <h4>Xiaomi 12S Pro</h4>
                                                <p><span>2799</span>元<span>起</span></p>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="d">
                                        <div class="l">
                                            <a href="">
                                                <img src="imgs/040.webp" alt="">
                                                <h4>Xiaomi MIX Fold 3</h4>
                                                <p><span>8999</span>元<span>起</span></p>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="d">
                                        <div class="l">
                                            <a href="">
                                                <img src="imgs/050.webp" alt="">
                                                <h4>Xiaomi 13 Ultra</h4>
                                                <p><span>5999</span>元<span>起</span></p>
                                            </a>
                                        </div>
                                    </li>
                                    <li class="d">
                                        <div class="l">
                                            <a href="">
                                                <img src="imgs/060.webp" alt="">
                                                <h4>Xiaomi 13</h4>
                                                <p><span>3999</span>元<span>起</span></p>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>

            <div class="logo_select">
                <div class="list_bx">
                    <input type="text" class="ss">
                    <div class="ss_list">
                        <ul>
                            <li><a href="#">全部商品</a></li>
                            <li><a href="#">手机</a></li>
                            <li><a href="#">红米</a></li>
                            <li><a href="#">冰箱</a></li>
                            <li><a href="#">洗衣机</a></li>
                            <li><a href="#">耳机</a></li>
                            <li><a href="#">笔记本</a></li>
                            <li><a href="#">电视</a></li>
                        </ul>
                    </div>
                </div>

                <div class="ss_btn">
                    <span class="iconfont icon-sousuo"></span>
                </div>
            </div>

        </div>
    </div>


    <!-- 商品侧边导航栏区域 -->
    <div class="goodsList">

        <div class="goodsList_bx bx">
            <!-- 图片 -->
            <a href="#">
                <img src="imgs/lbt.jpg" alt="">
            </a>
            <!-- 侧边栏 -->
            <div class="goodsListNav">
                <ul>
                    <li><a href="#"><span>手机</span> <span>></span></a>
                        <div class="goodsListNav_goods">
                            <ul>
                                <li><a href="#">
                                        <img src="imgs/01.webp" alt=""> <span>Xiaomi MIX系列</span> </a>
                                </li>
                                <li><a href="#">
                                        <img src="imgs/02.webp" alt=""> <span>Xiaomi 数字系列</span> </a>
                                </li>
                                <li><a href="#">
                                        <img src="imgs/03.webp" alt=""> <span>Xiaomi Civi系列</span> </a>
                                </li>
                                <li><a href="#">
                                        <img src="imgs/04.webp" alt=""> <span>Redmi K系列</span> </a>
                                </li>
                                <li><a href="#">
                                        <img src="imgs/05.webp" alt=""> <span>Redmi Note系列</span> </a>
                                </li>
                                <li><a href="#">
                                        <img src="imgs/06.webp" alt=""> <span>Redmi 数字系列</span> </a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li> <a href="#"><span>电视</span> <span>></span></a></li>
                    <li> <a href="#"><span>家电</span><span>></span></a></li>
                    <li> <a href="#"><span>笔记本 平板</span><span>></span></a></li>
                    <li><a href="#"> <span>出行 穿戴</span><span>></span></a></li>
                    <li><a href="#"><span>耳机 音箱</span><span>></span></a> </li>
                    <li> <a href="#"><span>健康 儿童</span><span>></span></a></li>
                    <li> <a href="#"><span>生活 箱包</span><span>></span></a></li>
                    <li> <a href="#"><span>智能 路由器</span><span>></span></a></li>
                    <li> <a href="#"><span>电源 配件</span><span>></span></a></li>
                </ul>
            </div>
            <div class="lbt"></div>
        </div>

    </div>

      <!-- 图标 -->
      <div class="fw">
        <div class="fw_bx bx">
            <div class="icons">
                <ul>

                    <li><a href="#">
                            <span class="iconfont icon-recording-line"></span><br>
                            <span>保障服务</span>
                        </a></li>
                    <li><a href="#">
                            <span class="iconfont icon-UIicon_qiye"></span><br>
                            <span>企业团购</span>
                        </a></li>
                    <li><a href="#">
                            <span class="iconfont icon-shiyongtanqinghuahewurongjichanggui"></span><br>
                            <span>F码通道</span>
                        </a></li>
                    <li><a href="#">
                            <span class="iconfont icon-SDqia"></span><br>
                            <span>米粉卡</span>
                        </a></li>
                    <li><a href="#">
                            <span class="iconfont icon-ershouhuishou"></span><br>
                            <span>以旧换新</span>
                        </a></li>
                    <li><a href="#">
                            <span class="iconfont icon-shouji2"></span><br>
                            <span>话费充值</span>
                        </a></li>
                </ul>
            </div>
            <div class="fw_tp">
                <div class="tp_bx">
                    <div class="tp">
                        <a href="#"> <img src="imgs/1.jpeg"></a>
                    </div>
                    <div class="tp">
                        <a href="#"> <img src="imgs/2.jpg"></a>
                    </div>
                    <div class="tp">
                        <a href="#"><img src="imgs/3.png"></a>
                    </div>
                </div>
            </div>
        </div>

    </div>



      <!-- Redmi5G图片 -->
      <div class="Redmi5G">
        <div class="Redmi5G_bx"><a href="#">
                <img src="imgs/Redmi5G.webp" alt="">
            </a>
        </div>
    </div>


    <!-- 弹性布局1 -->
    <div class="flex">
        <div class="flex_bx">
            <div class="wz">
                <span>手机</span>
                <a href="#">查看更多 <span class="iconfont icon-Rrl_s_139"></span></a>

            </div>

            <div class="flex1"><a href="#">
                    <img src="imgs/flex-1.webp" alt=""></a>
            </div>

            <div class="flex1_1">
                <div class="one_bx">
                    <div class="one"><a href="#">
                            <img src="imgs/1-1.webp" alt="">
                            <h4>
                                Xiaomi MIX Fold 3
                            </h4>
                            <p class="dec">轻薄折叠屏丨徕卡光学丨全焦段四摄</p>
                            <p><span>8999</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="#">
                            <img src="imgs/1-2.webp" alt="">
                            <h4>
                                Redmi K60 至尊版
                            </h4>
                            <p class="dec">旗舰体验全面超预期</p>
                            <p><span>2599</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="">
                            <img src="imgs/1-3.webp" alt="">
                            <h4>
                                Redmi 12 5G
                            </h4>
                            <p class="dec"> 5G 骁龙芯，大屏大电量 </p>
                            <p><span>949</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="">
                            <img src="imgs/1-4.webp" alt="">
                            <h4>
                                Redmi Note 12T Pro
                            </h4>
                            <p class="dec">年度 LCD 屏幕之光</p>
                            <p><span>1499</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="">
                            <img src="imgs/1-5.webp" alt="">
                            <h4>
                                Xiaomi Civi 3
                            </h4>
                            <p class="dec">仿生双眸 天生出色</p>
                            <p><span>2499</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="">
                            <img src="imgs/1-6.webp" alt="">
                            <h4>
                                Xiaomi 13 Ultra
                            </h4>
                            <p class="dec">徕卡光学全焦段四摄| 一英寸可变光圈| 徕卡专业街拍模式</p>
                            <p><span>5999</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="">
                            <img src="imgs/1-7.webp" alt="">
                            <h4>
                                Redmi Note 12 Turbo
                            </h4>
                            <p class="dec">狂暴引擎 超强性能释放</p>
                            <p><span>1799</span>元<span>起</span></p>
                        </a>
                    </div>
                    <div class="one"><a href="">
                            <img src="imgs/1-8.webp" alt="">
                            <h4>
                                Redmi K60
                            </h4>
                            <!-- <div class="dec"> -->
                            <p class="dec">骁龙8+｜2K 高光直屏｜5500mAh+67W闪充</p>
                            <!-- </div> -->
                            <p><span>2099</span>元<span>起</span></p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>




</body>